<!DOCTYPE>
<html>
<head>
<!-- 浏览器中显示自己的图表-->
<link rel="icon" href="../img/coco.png" type="image/x-icon" />
<link rel="shortcut icon" href="../img/coco.png" type="image/x-icon" />
<title>vue.js demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 xhtml 12小时入门教程" />
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
    <body>
    	<div id="app">
        <p>{{ message }}</p>
        <input v-model="message">
        <button v-on:click="reverseMessage">反转字符串</button>
        <button v-on:click="ok">ok</button>
      </div>
      <script>

        new Vue({
          el:'#app',
          data:{
            message:'coco'
          },
          methods:{
            reverseMessage:function(){
              this.message = this.message.split('').reverse().join('');
            },
            ok:function(){
              alert(this.message);
            }
          }
        })

      </script>
    </body>
</html>
